<template>
  <el-dialog v-dialog-drag :custom-class="`edit-dialog medium ${className}`" append-to-body
             :width="width"
             :close-on-click-modal="isMask"
             :visible="open"
             :close-on-press-escape="false"
             @close='onClose' >
    <div slot="title">{{title}}</div>
    <FormCom v-if="open" ref="form" :columns="columns" :rules="rules" :size="size" :labelWidth="labelWidth"></FormCom>
    <div slot="footer" class="dialog-footer" v-if="buttons.length">
      <el-button size="small"
                 v-for="(item,index) in buttons"
                 :loading="item.onlyClick ? loading : false"
                 :key="index" v-bind="item.props"
                 @click="onClick(item)">{{item.text}}
      </el-button>
    </div>
  </el-dialog>
</template>

<script>
  let defaultConfig = {
    className:'',
    isMask:false,
    PATH_SAVE:'',// 表单提交地址
    title:'',// 标题
    width:'70%',// 弹框大小
    buttons:[],// 按钮 （默认 确定/取消）
    open:false,// 是否隐藏
    loading:false,// 请求提交状态：是否加载中
    size:12,// 表单：布局大小
    labelWidth:'6em',// 表单：label宽度
    formatter:'',
    rules:{}
  }

  export default {
    name: "DialogEdit",
    data() {
      return {
        ...defaultConfig,
        row:{},
        columns:[],
        rules:{}
      }
    },
    methods: {
      // 自定义配置
      options(opt){
        _.extend(this,opt);
      },
      setFormOptions(opt){
        this.$refs.form.setData(opt);
      },
      //
      onOpen(options,callback){
        if(options){
          // 初始化配置
          _.extend(this,defaultConfig,{
            open:true,
            buttons:[
              {text:'取 消',size:"small"},
              {text:'确 定',size:"small",onlyClick:true,onSubmit:this.formSubmit,props:{type:'primary'}}
            ]
          },options)
          // 更新表单
          this.callback = callback;
          this.$nextTick(()=>{
            this.$refs.form?.resetForm().setData(options.row).setRules(options.rules)?.clearValidate();
          });
        }
        return this;
      },
      onClose (){
        this.open = false;
      },
      onEnd (){
        this.onClose();
        if(this.callback){
          this.callback()
        }
      },
      onLoading(f=true){
        if(f){
          this.loading = true;
        }else{
          setTimeout(()=>{
            this.loading = false;
          },333)
        }
      },
      onClick(item){
        let sc = this;
        if(item.onClick){
          item.onClick();
        }else if(item.onSubmit){
          sc.$refs.form.validate().then((data)=>{
            sc.onLoading();
            let pro = item.onSubmit(data);
            pro?.then && pro.then(sc.onEnd).finally(()=>sc.onLoading(false))
          })
        }else{
          this.onClose();
        }
      },
      /** 提交按钮 */
      formSubmit: function(data) {
        let sc = this;
        let pm = sc.formatter ? sc.formatter.call(sc,data) : data;
        if(sc.PATH_SAVE){
          if(typeof sc.PATH_SAVE == "string"){
            return sc.api(sc.PATH_SAVE,pm,sc).then(()=>{
              this.$message({message: `${this.title}成功`, type: 'success'})
            })
          }else{
            return sc.PATH_SAVE(pm)
          }
        }else{
          return pm
        }
      },
    }
  }

</script>

<style>
  .edit-dialog .el-dialog__body{
    padding-top:15px;
    padding-bottom:15px;
  }
  .edit-dialog .el-dialog__header{
    padding:20px 20px 15px;
    border-bottom:1px solid #f0f0f0;
  }
</style>
